<template>
  <div class="chatBox">
    <header>
      <van-row justify="center">
        <van-col span="3">
          <i class="iconfont icon-zuojiantou" @click="prev"></i>
        </van-col>
        <van-col span="18">微 聊</van-col>
        <van-col span="3">
          <i> + </i>
        </van-col>
      </van-row>
    </header>
    <div class="top">
      <van-search
        v-model="value"
        placeholder="搜索经纪人/聊天记录"
        background="inherit"
      />
    </div>
    <div class="main">
      <atom-carousel :pagination="true" :loop="true" v-model="slideIdx">
        <div
          class="carousel-item"
          v-for="(item, index) in brokerList"
          :key="index"
        >
          <h2>{{ item.name }}</h2>
          <p>{{ item.company }}</p>
          <van-rate
            v-model="item.score"
            :size="25"
            color="#ff5654"
            void-icon="star"
            void-color="#eee"
            readonly='readonly'
          />
          <p class="bot">{{ item.aimed }}</p>
          <p class="bot">{{ item.area }}</p>
          <div class="btn">微聊</div>
        </div>
      </atom-carousel>
      <div class="pic">
        <img
          src="https://img1.baidu.com/it/u=4020907432,679957250&fm=26&fmt=auto"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      readonly: true,
      value: "",
      slideIdx: 0,
      brokerList: [
        {
          name: "刘杨",
          company: "宜居地产",
          score: 4,
          aimed: "主营育新——回龙观",
          area: "覆盖57个小区",
        },
        {
          name: "张三",
          company: "宜居地产",
          score: 3,
          aimed: "西直门——大慧寺东",
          area: "覆盖68个小区",
        },
      ],
    };
  },
  methods: {
    prev() {
      this.$router.push('/my')
    }
  }
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.chatBox {
  min-height: 1334px;
  background-color: #efefef;
}
header {
  width: 100%;
  height: 88px;
  background: rgb(255, 86, 84);
  .van-col {
    font-size: 36px;
    color: #fff;
    i {
      font-size: 36px;
      line-height: 88px;
    }
    text-align: center;
    line-height: 88px;
    &:nth-child(3) {
      i {
        font-size: 48px;
      }
    }
  }
}
.top {
  .van-search {
    padding: 20px 48px;
    .van-cell {
      padding: 0 124px;
      /deep/.van-field__control {
        margin: 10px 0;
      }
      /deep/.van-icon-search {
        // margin-top: 23px;
        line-height: 70px;
      }
    }
  }
}
.main {
  /deep/.atom-carousel {
    width: 396px;
    height: 500px;
    box-shadow: 0 0 20px #ccc;
    box-sizing: border-box;
    margin: 302px auto 0;
    background-color: #fff;
    overflow: hidden;
    padding-top: 96px;
    .atom-carousel-wrapper {
      // margin-left: -40px;
      .carousel-item {
        width: 396px;
        // border: 1px solid #ccc;
        text-align: center;
        h2 {
          font-size: 36px;
          color: #545454;
        }
        p {
          margin-top: 5px;
          font-size: 28px;
        }
        .bot {
          font-size: 22px;
          color: #545454;
        }
        .van-rate {
          margin-top: 15px;
        }
        .btn {
          margin: 0 auto;
          margin-top: 40px;
          width: 225px;
          height: 55px;
          border: 2px solid #ff5654;
          border-radius: 8px;
          font-size: 24px;
          color: #1b1b1b;
          line-height: 55px;
        }
      }
    }
  }
}
// /deep/.atom-carousel .pagination-point-wrapper {
//     bottom: -150px !important;
// }
/deep/.atom-carousel .pagination-point-wrapper .point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d2d2d2;
}
/deep/.atom-carousel .pagination-point-wrapper .point.is-active {
  background-color: #ff5654;
}
.pic {
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  top: -550px;
  width: 100px;
  height: 100px;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
}
</style>